import React, { useState, useImperativeHandle } from "react";
import PropTypes from "prop-types";
import { Modal } from "antd";

let okBack = () => { };
const DialogCom = ({ isScre = false, btnTxt = ["取消", "确定"], children, cRef, autoClose = true, title, width, afterClose }) => {

    if (isScre === true) {
        width = "100%";
    }
    const [visible, setVisible] = useState(false);
    const open = cb => {
        setVisible(true);
        okBack = cb;
    };

    useImperativeHandle(cRef, () => ({
        open: cb => open(cb),
    }));

    const handleCancel = () => {
        setVisible(false);
    };

    const handleOk = () => {
        autoClose && setVisible(false);
        okBack(handleCancel);
    };

    const Modalstyle = {
        maxWidth: "100vw",
        top: 0,
        paddingBottom: 0,
    };
    const bodyStyle = {
        height: "calc(100vh - 55px - 53px)",
        overflowY: "auto"
    };
    return <Modal
        style={isScre === true ? Modalstyle : {}}
        bodyStyle={isScre === true ? bodyStyle : {}}
        title={title}
        width={width}
        afterClose={afterClose}
        centered
        maskClosable={false}
        visible={visible}
        onOk={handleOk}
        onCancel={handleCancel}
        okText={btnTxt[1]}
        cancelText={btnTxt[0]}
    >
        {children}
    </Modal >;
};

DialogCom.propTypes = {
    btnTxt: PropTypes.array,
    children: PropTypes.any.isRequired,
    cRef: PropTypes.object.isRequired,
    autoClose: PropTypes.bool,
};

export default DialogCom;